<template>
  <view class="container">
    <view class="status-card" :class="getBillStatusClass(billDetail.payment_status)">
      <text class="status-text">{{ getBillStatusText(billDetail.payment_status) }}</text>
      <text class="status-desc">{{ getBillStatusDesc(billDetail.payment_status) }}</text>
    </view>
    
    <view class="amount-card">
      <text class="amount-label">应缴金额</text>
      <text class="amount-value">¥{{ billDetail.amount }}</text>
    </view>
    
    <view class="info-card">
      <view class="card-title">账单信息</view>
      <view class="info-item">
        <text class="info-label">账单编号</text>
        <text class="info-value">{{ billDetail.bill_number }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">账单类型</text>
        <text class="info-value">{{ billDetail.bill_type }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">账单周期</text>
        <text class="info-value">{{ billDetail.bill_period || '无周期信息' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">账单备注</text>
        <text class="info-value">{{ billDetail.remarks || '无备注信息' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">生成时间</text>
        <text class="info-value">{{ billDetail.created_at || '未知' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">缴费截止</text>
        <text class="info-value">{{ billDetail.due_date }}</text>
      </view>
      <view class="info-item" v-if="billDetail.payment_status === '已支付'">
        <text class="info-label">缴费时间</text>
        <text class="info-value">{{ billDetail.payment_date }}</text>
      </view>
    </view>
    
    <view class="detail-card">
      <view class="card-title">费用明细</view>
      <view class="detail-item" v-for="(item, index) in billDetail.details" :key="index">
        <text class="detail-name">{{ item.name }}</text>
        <text class="detail-value">¥{{ item.value }}</text>
      </view>
      <view class="detail-total">
        <text class="total-label">合计</text>
        <text class="total-value">¥{{ billDetail.amount }}</text>
      </view>
    </view>
    
    <view class="remark-card" v-if="billDetail.remark">
      <view class="card-title">备注</view>
      <text class="remark-text">{{ billDetail.remark }}</text>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-btns" v-if="billDetail.payment_status === '未支付'">
      <button class="pay-btn" @click="payBill">立即缴费</button>
    </view>
    
    <!-- 已缴费凭证 -->
    <view class="receipt-card" v-if="billDetail.payment_status === '已支付'">
      <view class="card-title">缴费凭证</view>
      <view class="receipt-content">
        <image class="receipt-qrcode" src="/static/qrcode.png"></image>
        <text class="receipt-tip">扫描二维码查看电子凭证</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getBillDetail } from '../../api/billing.js';

export default {
  data() {
    return {
      id: null,
      billDetail: {
        bill_number: '',
        bill_type: '',
        payment_status: '',
        bill_period: '',
        remarks: '',
        amount: '0.00',
        due_date: '',
        payment_date: '',
        created_at: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.fetchBillDetail()
    }
  },
  methods: {
    // 获取账单详情
    fetchBillDetail() {
      uni.showLoading({
        title: '加载中...'
      })
      
      getBillDetail(this.id).then(res => {
        if (res.code === 200 && res.data) {
          this.billDetail = res.data
        } else {
          uni.showToast({
            title: res.message || '获取账单详情失败',
            icon: 'none'
          })
        }
      }).catch(err => {
        console.error('获取账单详情失败:', err)
        uni.showToast({
          title: '获取账单详情失败，请稍后重试',
          icon: 'none'
        })
      }).finally(() => {
        uni.hideLoading()
      })
    },
    
    // 获取账单状态文本
    getBillStatusText(status) {
      const statusMap = {
        '未支付': '待缴费',
        '已支付': '已缴费',
        '逾期': '已逾期'
      }
      return statusMap[status] || status
    },
    
    // 获取账单状态描述
    getBillStatusDesc(status) {
      const descMap = {
        '未支付': '请在截止日期前完成缴费',
        '已支付': '感谢您按时缴费',
        '逾期': '您的账单已逾期，请尽快缴费'
      }
      return descMap[status] || ''
    },
    
    // 获取账单状态样式类
    getBillStatusClass(status) {
      const classMap = {
        '未支付': 'status-unpaid',
        '已支付': 'status-paid',
        '逾期': 'status-overdue'
      }
      return classMap[status] || ''
    },
    
    // 缴费
    payBill() {
      uni.navigateTo({
        url: `/pages/billing/payment?id=${this.id}`
      })
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #F8F8F8;
  min-height: 100vh;
}

.status-card {
  padding: 40rpx 30rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  color: #FFFFFF;
}

.status-unpaid {
  background: linear-gradient(135deg, #FF9500, #FF5E3A);
}

.status-paid {
  background: linear-gradient(135deg, #34C759, #30D158);
}

.status-overdue {
  background: linear-gradient(135deg, #FF3B30, #FF2D55);
}

.status-text {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}

.status-desc {
  font-size: 28rpx;
  opacity: 0.9;
}

.amount-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  text-align: center;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.amount-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
  display: block;
}

.amount-value {
  font-size: 48rpx;
  color: #333;
  font-weight: bold;
}

.info-card, .detail-card, .remark-card, .receipt-card {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  position: relative;
  padding-left: 20rpx;
}

.card-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8rpx;
  height: 32rpx;
  width: 6rpx;
  background-color: #007AFF;
  border-radius: 3rpx;
}

.info-item {
  display: flex;
  margin-bottom: 16rpx;
}

.info-label {
  width: 180rpx;
  color: #666;
  font-size: 28rpx;
}

.info-value {
  flex: 1;
  color: #333;
  font-size: 28rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.detail-name {
  color: #666;
  font-size: 28rpx;
}

.detail-value {
  color: #333;
  font-size: 28rpx;
}

.detail-total {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #F2F2F2;
}

.total-label {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

.total-value {
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
}

.remark-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.bottom-btns {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  padding: 0 30rpx;
}

.pay-btn {
  width: 100%;
  height: 90rpx;
  border-radius: 45rpx;
  background-color: #007AFF;
  color: #FFFFFF;
  font-size: 32rpx;
  line-height: 90rpx;
}

.receipt-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.receipt-qrcode {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 20rpx;
}

.receipt-tip {
  font-size: 26rpx;
  color: #666;
}
</style> 